<template>
  <div class="hot-con">
    <div class="fouse">
      <van-swipe class="my-swipe" :autoplay="8000" indicator-color="#f28533" :loop="false">
        <van-swipe-item v-for="item in fouseList" :key="item.id">
          <router-link :to="`/product/${item.id}`"><img :src="item.imgUrl" alt=""></router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav">
      <div class="nav-item"><a href="3"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b1749080cf5bbc4dfebff83013bbebaf.png?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://i8.mifile.cn/v1/a1/e8bc849a-0a3b-21a0-6810-7da3a3903dee.webp?w=216&h=228&bg=FDEFDE" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/69c250436545049ccab81c3e32033cf2.png?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0434594382110f3bd15c90f040d5d542.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64f3988b6216e4c1ab62a7f50df3e816.png?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ea68dee2bfa0e55a82236b0d968e975.png?w=216&h=228&bg=FCEAEA" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/96c780016ea196743905dc93f9249c39.png?w=216&h=228&bg=FDF5E5" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9425031cdd7af22d9a23a5ae16d1f57c.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a></div>
      <div class="nav-item"><a href="3"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f11f9df6b0b0b428f8c8fc3267131830.png?w=216&h=228&bg=FDEDE8" alt=""></a></div>
    </div>
    <div class="line"></div>
    <div class="banner">
      <div class="banner-left">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/16305100fd7913dd727e8906b97e8998.png?f=webp&w=537&h=762&bg=DDE2E6" alt="">
      </div>
      <div class="banner-right">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f8a28a90c3c449ba422a10e40085d2e9.png?f=webp&w=537&h=378&bg=DBDEEF" alt="">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/200a6f45d1ccbf7d8fd92f4bbe2842d4.jpeg?f=webp&w=537&h=378&bg=F3E7E7" alt="">
      </div>
    </div>
    <div class="line"></div>
    <div class="box">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/051b383d45f1fad5aa3bfae8851af7c4.png?f=webp&w=1080&h=660&bg=FFFFFF" alt="">
    </div>
    <div class="product">
      <ul class="clearfix">
        <li class="product-item" v-for="item in phoneList" :key="item.id">
          <router-link :to="`/product/${item.id}`">
            <div class="img">
              <img v-lazy="item.imgUrl" alt="">
            </div>
            <div class="item-text">
              <h2 class="title">{{item.name}}</h2>
              <p>{{item.text}}</p>
              <p class="price">{{item.price}}元起</p>
              <a class="goBuy">立即购买</a>
            </div>
          </router-link>
        </li>

      </ul>
      <MoreProduct type="phone" word="小米手机"></MoreProduct>
    </div>
    <div class="line"></div>
    <div class="TV">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/396893c2d8416dc791cc3cd7f8a65bdf.jpeg?f=webp&w=1080&h=660&bg=FFFFFF" alt="">
      <MoreProduct type="TV" word="小米电视" />
    </div>
    <div class="line"></div>
    <div class="noteBook">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/393a90da633889384d35acb7c44eeb17.jpg?f=webp&w=1080&h=660&bg=FFFFFF" alt="">
      <ul class="clearfix">
        <li class="product-item" v-for="item in noteBookList" :key="item.id">
          <router-link :to="`/product/${item.id}`">
            <div class="img">
              <img v-lazy="item.imgUrl" alt="">
            </div>
            <div class="item-text">
              <h2 class="title">{{item.name}}</h2>
              <p>{{item.text}}</p>
              <p class="price">{{item.price}}元起</p>
              <router-link to="#" class="goBuy">立即购买</router-link>
            </div>
          </router-link>
        </li>

      </ul>
      <MoreProduct type="noteBook" word="小米笔记本" />
    </div>
    <div class="end">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4c4a11536a720ee0f1b516e53e4d868.jpg?f=webp&w=1080&h=420&bg=873FFA" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHot',
  data() {
    return {
      fouseList: [
        { id: 1, imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7948d1f963986b5f9dd240d32d6a0839.jpg?thumb=1&w=720&h=360' },
        { id: 2, imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ceb285f512491956f67f83a6d2e821c.jpg?thumb=1&w=720&h=360' },
        { id: 3, imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b23f24913cd96e2afdbb584655b4995a.jpg?thumb=1&w=720&h=360' }
      ],
      phoneList: [],
      noteBookList: []
    }
  },
  mounted() {
    this.getHomeProdcutList()
    this.getHomeNoteBookList()
  },
  methods: {
    async getHomeProdcutList() {
      const res = await this.$API.homeProductList()
      this.phoneList = res.data
    },
    async getHomeNoteBookList() {
      const res = await this.$API.homeNoteBookList()
      this.noteBookList = res.data
    }
  }
}
</script>

<style lang="less" scoped>
.hot-con {
  padding: 84px 0 90px;
  .fouse {
    margin-top: 10px;
  }
  .my-swipe .van-swipe-item {
    color: black;
    img {
      width: 100%;
      height: auto;
    }
  }
  .nav {
    display: flex;
    flex-wrap: wrap;
    .nav-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 152px;
      img {
        width: 128px;
        height: autp;
      }
    }
  }
  .banner {
    width: 720px;
    height: 508px;
    margin: 0 auto;
    .banner-left {
      display: inline-block;
      vertical-align: top;
      width: 358px;
      height: 100%;
      margin-right: 4px;
      img {
        width: 100%;
        height: auto;
      }
    }
    .banner-right {
      display: inline-block;
      width: 358px;
      height: 100%;
      overflow: hidden;
      img {
        width: 100%;
        height: 50%;
      }
    }
  }
  .box {
    width: 720px;
    margin: 0 auto;
  }
  .noteBook {
    width: 720px;
    margin: 0 auto;
    padding: 0 10px;
    .product-item {
      float: left;
      width: 344px;
      margin-bottom: 6.6666px;
      &:nth-child(odd) {
        margin-right: 12px;
      }
      .img {
        padding: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-text {
        text-align: center;
        padding: 20px 25px;
        font-size: 28px;
        line-height: 40px;
        p {
          color: #666;
        }
        .price {
          color: rgb(237, 60, 60);
        }
        .goBuy {
          display: inline-block;
          width: 200px;
          height: 59.6px;
          background-color: #ea625b;
          border-radius: 5px;
          color: #fff;
          line-height: 59.6px;
        }
      }
    }
  }
  .TV {
    width: 720px;
    margin: 0 auto;
    img {
      width: 100%;
      height: auto;
    }
  }
  .product {
    width: 720px;
    margin: 15px auto 0;
    padding: 0 10px;
    .product-item {
      float: left;
      width: 344px;
      margin-bottom: 6.6666px;
      &:nth-child(odd) {
        margin-right: 12px;
      }
      .img {
        padding: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-text {
        text-align: center;
        padding: 20px 25px;
        font-size: 28px;
        line-height: 40px;
        p {
          color: #666;
        }
        .price {
          color: rgb(237, 60, 60);
        }
        .goBuy {
          display: inline-block;
          width: 200px;
          height: 59.6px;
          background-color: #ea625b;
          border-radius: 5px;
          color: #fff;
          line-height: 59.6px;
        }
      }
    }
  }
  .end-box {
    width: 720px;
    margin: 0 auto;
    img {
      width: 358px;
      height: 480px;
      &:nth-child(odd) {
        margin-right: 4px;
      }
    }
  }
  .end {
    width: 720px;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
}
</style>
<style scoped>
/deep/ .van-swipe__indicator {
  width: 15px;
  height: 15px;
  margin: 0 10px;
}
</style>
